• In "Habit Hustle: The Creative Process Behind a UI Animation," Michael Crawford, a visual designer based in Stockholm, shares insights into his creative journey while developing a captivating animation inspired by gemstones. The article delves into the tools and techniques he employs, providing a detailed look at the workflow involved in creating UI animations. Crawford begins by introducing his background, highlighting his transition from advertising to interactive design. He emphasizes his passion for learning new skills in software like AfterEffects and Blender, which he uses to create prototypes. His animation project revolves around the concept of gemstones, which he associates with rewards for completing everyday tasks. This thematic choice sets the stage for the visual exploration that follows. The article outlines Crawford's program stack, which includes Blender for 3D motion, Figma for layout design, and AfterEffects for animation. He mentions specific plugins that enhance his workflow, such as AEUX for converting Figma files to AfterEffects and Motion 4 for streamlining animation tasks. These tools are essential for managing the complexities of syncing animations between different software. Crawford details his initial concept development, where he creates gemstone assets in Blender. He shares insights into the shader setup for achieving realistic glass and gem effects, emphasizing the importance of using accurate values for index of refraction (IOR) and dispersion to enhance realism. This technical foundation is crucial for the visual appeal of the final animation. The animation process is broken down into several steps. Crawford explains the challenges of syncing animations between Blender and AfterEffects, particularly for scroll animations. He provides practical tips for exporting layouts from Figma to AfterEffects, including strategies for managing layers and ensuring text is properly formatted. He also discusses the importance of building the animation in AfterEffects first to establish timing before moving to Blender. Once the rough animation is established, Crawford moves to Blender to refine the animation. He describes the intricacies of setting keyframes and adjusting properties, noting the flexibility of Blender in animating various elements. He emphasizes the need for frequent saving due to the software's tendency to crash, particularly during rendering. After testing the animation in AfterEffects, Crawford iterates on the timing and details, ensuring that the final product is polished. He highlights the significance of creating a seamless loop for social media and case studies, even if it’s not necessary for client projects. The final rendering process in Blender is time-consuming, especially with complex glass materials, but it culminates in a satisfying result. Crawford concludes by reflecting on the joy of creating personal projects, which allow him to experiment and refine his skills. He encourages others to pursue their interests in design and animation, emphasizing the importance of enjoyment in the learning process. The article serves as both a tutorial and an inspiration for designers looking to enhance their animation skills.

    Friday, September 27, 2024